/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\QuotaManage\Report\InventoryDynamicReport\index.tsx
 * @Date: 2022-01-14 16:50:13
 * @LastEditTime: 2022-02-28 15:16:28
 */

import { Button, Col, Row, Spin } from 'antd'
import React, { Component } from 'react'
import './components/index.scss'
import { http, UdDrawer, UdPage, UdPageHeader } from '@/lib'
import quotaApis from '@/apis/AboutQuota'
import CountUp from 'react-countup'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import peUrl from '@/assets/pe.png'
import UdSelect from '@/components/UdFormControls/UdSelect'
import udMainStore from '@/store/UdMain'
import { randomNumber } from '@/utils/methods'
import Colock from './components/Colock'
import InventoryDynamicReport from './components/InventoryDynamicReportTab'

let StatisticsDataId
let userCode = JSON.parse(sessionStorage.getItem('UaaSysInfo'))?.profile?.userCode
export default class InventoryDynamicReportTab extends Component<any> {
  private brandList = udMainStore.brandList

  state = {
    //* 如果是管理员，初始进来看国窖的
    checkedCode: userCode === 'admin' ? 'GS100283' : this.brandList[0].value,
    statisticsData: [],
    loading: false,
  }

  componentDidMount(): void {
    this.setState({ loading: true })
    this.getStatisticsData()
  }
  componentWillUnmount(): void {
    StatisticsDataId && clearInterval(StatisticsDataId)
  }

  private getStatisticsData = (brandCode: string | number = this.state.checkedCode) => {
    let _this = this
    StatisticsDataId && clearInterval(StatisticsDataId)
    StatisticsDataId = setInterval(
      (function targer() {
        http
          .get(quotaApis.getStockMoveStatistics, {
            params: { brandCode },
          })
          .then(res => {
            const { data: statisticsData = [] } = res
            _this.setState({ statisticsData, loading: false })
          })
        return targer
      })(),
      20000
    )
  }

  private showInventoryDynamicReport = () => {
    let { checkedCode } = this.state
    UdDrawer.open({
      title: '库存动销实时报表',
      width: '90%',
      footer: false,
      content: <InventoryDynamicReport checkedCode={checkedCode} />,
    })
  }

  render() {
    let { statisticsData = [], loading, checkedCode } = this.state
    return (
      <UdPage className="list-page inventoryDynamicReport">
        <UdPageHeader title="库存动销实时报表" />
        <div className="inventoryDynamicReportTab">
          <Spin spinning={loading} tip={'加载中'}>
            <div className="inner-wrap">
              <header>
                <Colock />
                <div>
                  <UdSelect
                    defaultValue={checkedCode}
                    dropdownClassName="selection"
                    showSearch
                    allowClear={false}
                    options={this.brandList}
                    onChange={checkedCode => {
                      this.setState({ loading: true, checkedCode })
                      this.getStatisticsData(checkedCode)
                    }}
                    style={{ width: '260px' }}
                  />
                  <Button
                    style={{
                      marginLeft: 20,
                      backgroundColor: '#2e62ff',
                      color: '#fff',
                      border: 'none',
                      outline: 'none',
                    }}
                    onClick={this.showInventoryDynamicReport}
                  >
                    切换具体报表
                  </Button>
                </div>
              </header>
              <Row gutter={[20, 20]} style={{ minHeight: 800 }}>
                {statisticsData.map(({ groupName, currentStock, currentMove, monthMove, yearMove }, index) => {
                  return (
                    <Col className="gutter-row" span={8} key={index}>
                      <div className="gutter-box">
                        <div className="title">
                          <img src={peUrl} alt="配额" className="pe" /> {groupName}
                        </div>
                        <div className="statistics-wrap">
                          <div className="statistics-item">
                            <div className="statistics-item-title">当前库存</div>
                            <div className="statistics-item-value">
                              <span>
                                {currentStock.type !== 0 ? (
                                  currentStock.type === 1 ? (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-increase">
                                          <CountUp
                                            start={currentStock.finalStock - currentStock.increment}
                                            end={currentStock.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value increase">+{currentStock.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  ) : (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-decrease">
                                          <CountUp
                                            start={currentStock.finalStock + currentStock.increment}
                                            end={currentStock.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value decrease">-{currentStock.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  )
                                ) : (
                                  currentStock.finalStock
                                )}
                              </span>
                            </div>
                          </div>
                          <div className="statistics-item">
                            <div className="statistics-item-title">今日动销</div>
                            <div className="statistics-item-value">
                              <span>
                                {currentMove.type !== 0 ? (
                                  currentMove.type === 1 ? (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-increase">
                                          <CountUp
                                            start={currentMove.finalStock - currentMove.increment}
                                            end={currentMove.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value increase">+{currentMove.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  ) : (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-decrease">
                                          <CountUp
                                            start={currentMove.finalStock + currentMove.increment}
                                            end={currentMove.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value decrease">-{currentMove.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  )
                                ) : (
                                  currentMove.finalStock
                                )}
                              </span>
                            </div>
                          </div>
                          <div className="statistics-item">
                            <div className="statistics-item-title">本月累计动销</div>
                            <div className="statistics-item-value">
                              <span>
                                {monthMove.type !== 0 ? (
                                  monthMove.type === 1 ? (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-increase">
                                          <CountUp
                                            start={monthMove.finalStock - monthMove.increment}
                                            end={monthMove.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value increase">+{monthMove.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  ) : (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-decrease">
                                          <CountUp
                                            start={monthMove.finalStock + monthMove.increment}
                                            end={monthMove.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value decrease">-{monthMove.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  )
                                ) : (
                                  monthMove.finalStock
                                )}
                              </span>
                            </div>
                          </div>
                          <div className="statistics-item">
                            <div className="statistics-item-title">本年累计动销</div>
                            <div className="statistics-item-value">
                              <span>
                                {yearMove.type !== 0 ? (
                                  yearMove.type === 1 ? (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-increase">
                                          <CountUp
                                            start={yearMove.finalStock - yearMove.increment}
                                            end={yearMove.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value increase">+{yearMove.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  ) : (
                                    <>
                                      <TransitionGroup component={null}>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="color-decrease">
                                          <CountUp
                                            start={yearMove.finalStock + yearMove.increment}
                                            end={yearMove.finalStock}
                                            duration={1}
                                          />
                                        </CSSTransition>
                                        <CSSTransition timeout={1000} key={randomNumber(5)} classNames="fade">
                                          <span className="dynamic-value decrease">-{yearMove.increment}</span>
                                        </CSSTransition>
                                      </TransitionGroup>
                                    </>
                                  )
                                ) : (
                                  yearMove.finalStock
                                )}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </Col>
                  )
                })}
              </Row>
            </div>
          </Spin>
        </div>
      </UdPage>
    )
  }
}
